<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index" @click="$router.push({path:'/main',query:{id:item.id}})">
        <img :src="item.icon" alt="">
        <p>{{ item.name }}</p>
      </li>
    </ul>

  </div>
</template>

<script>
import { stu_01 } from "../api/student"
export default {
  data() {
    return {
      list: []
    }
  },
  async mounted() {
    // 获取到后台里的数据
    let student = await stu_01()
    console.log(student.data);
    this.list = student.data;

  },
  methods: {
    // lists() {
    //   // const id =this.$data.list.id;
    //   // const name = this.$data.list.name;
    //   this.$router.push({
    //     name:'main'
    //   })
    // }

  }
}
</script>

<style lang="scss" scoped>
div {
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    border: 2px solid black;
    width: 600px;

    li {
      width: 200px;
      height: 200px;
      text-align: center;
    }
  }
}
</style>